{% extends "admin/base.html" %}

{% block title %}{% if landmark %}编辑地标{% else %}添加地标{% endif %} - 地标和路径管理系统{% endblock %}

{% block extra_css %}
<style>
    .form-floating label {
        color: #6c757d;
    }

    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating > .form-select ~ label {
        color: var(--primary-color);
    }

    .media-upload-area {
        border: 2px dashed #dee2e6;
        border-radius: 0.35rem;
        padding: 2rem;
        text-align: center;
        background-color: #f8f9fc;
        transition: all 0.3s;
        cursor: pointer;
    }

    .media-upload-area:hover {
        border-color: var(--primary-color);
        background-color: rgba(78, 115, 223, 0.05);
    }

    .media-upload-area.dragover {
        border-color: var(--primary-color);
        background-color: rgba(78, 115, 223, 0.1);
    }

    .preview-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 1rem;
    }

    .preview-item {
        position: relative;
        width: 120px;
        height: 120px;
        border-radius: 0.35rem;
        overflow: hidden;
        border: 1px solid #e3e6f0;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: all 0.3s;
    }

    .preview-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    }

    .preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .preview-remove {
        position: absolute;
        top: 5px;
        right: 5px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--danger-color);
        transition: all 0.3s;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .preview-remove:hover {
        background: var(--danger-color);
        color: white;
        transform: rotate(90deg);
    }

    .map-container {
        height: 400px;
        width: 100%;
        border-radius: 0.35rem;
        overflow: hidden;
        margin-top: 1rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .required-field::after {
        content: " *";
        color: var(--danger-color);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800 page-title">
            <i class="bi bi-geo-alt-fill me-2"></i>{% if landmark %}编辑地标{% else %}添加地标{% endif %}
        </h1>
        <a href="/admin/landmarks" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i> 返回列表
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">地标信息</h6>
                </div>
                <div class="card-body">
                    <form id="landmark-form" method="post" action="/admin/landmarks/save">
                        {% if landmark %}
                        <input type="hidden" name="id" value="{{ landmark.id }}">
                        {% endif %}

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="地标名称" required
                                           value="{% if landmark %}{{ landmark.name }}{% endif %}">
                                    <label for="name" class="required-field">地标名称</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="number" step="any" class="form-control" id="lat" name="lat" placeholder="纬度" required
                                           value="{% if landmark %}{{ landmark.lat }}{% endif %}">
                                    <label for="lat" class="required-field">纬度</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="number" step="any" class="form-control" id="lng" name="lng" placeholder="经度" required
                                           value="{% if landmark %}{{ landmark.lng }}{% endif %}">
                                    <label for="lng" class="required-field">经度</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="summary" name="summary" placeholder="简介" required
                                           value="{% if landmark %}{{ landmark.summary }}{% endif %}">
                                    <label for="summary" class="required-field">简介</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="form-floating mb-3">
                                    <textarea class="form-control" id="details" name="details" placeholder="详细介绍" style="height: 150px">{% if landmark %}{{ landmark.details }}{% endif %}</textarea>
                                    <label for="details">详细介绍</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="form-floating mb-3">
                                    <input type="datetime-local" class="form-control" id="time" name="time" placeholder="时间"
                                           value="{% if landmark and landmark.time %}{{ landmark.time.strftime('%Y-%m-%dT%H:%M') }}{% endif %}">
                                    <label for="time">时间</label>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="button" id="preview-location" class="btn btn-info me-md-2">
                                <i class="bi bi-eye me-1"></i> 预览位置
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-1"></i> 保存地标
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">媒体文件</h6>
                </div>
                <div class="card-body">
                    <div class="media-upload-area" id="media-upload-area">
                        <i class="bi bi-cloud-upload fa-3x text-muted mb-3"></i>
                        <h5>拖放图片或点击上传</h5>
                        <p class="text-muted">支持 JPG, PNG, GIF 格式</p>
                        <input type="file" id="media-upload" accept="image/*" multiple style="display: none;">
                    </div>

                    <div class="preview-container" id="media-preview">
                        {% if landmark and landmark.media %}
                            {% for media in landmark.media %}
                            <div class="preview-item" data-path="{{ media }}">
                                <img src="/{{ media }}" alt="媒体文件">
                                <div class="preview-remove">
                                    <i class="bi bi-x"></i>
                                </div>
                            </div>
                            {% endfor %}
                        {% endif %}
                    </div>

                    <input type="hidden" id="media" name="media" value='{% if landmark and landmark.media %}{{ landmark.media|tojson }}{% else %}[]{% endif %}'>
                </div>
            </div>

            <div class="card mt-4" id="map-card" style="display: none;">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">位置预览</h6>
                </div>
                <div class="card-body p-0">
                    <div class="map-container" id="map-container">
                        <!-- 地图将通过JavaScript加载 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 提示消息 -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="toast-container" class="toast-container">
        <!-- Toast消息将通过JavaScript动态添加 -->
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // ===== 工具函数 =====

    // 显示提示消息
    function showToast(message, type = 'info') {
        // 确保Bootstrap已加载
        if (typeof bootstrap === 'undefined') {
            console.error('Bootstrap未加载');
            alert(message);
            return;
        }

        const toastContainer = document.getElementById('toast-container');

        // 创建toast元素
        const toast = document.createElement('div');
        toast.className = `toast align-items-center text-white bg-${type} border-0`;
        toast.setAttribute('role', 'alert');
        toast.setAttribute('aria-live', 'assertive');
        toast.setAttribute('aria-atomic', 'true');

        // 创建toast内容
        toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        `;

        // 添加到容器
        toastContainer.appendChild(toast);

        // 初始化Bootstrap toast
        const bsToast = new bootstrap.Toast(toast, {
            autohide: true,
            delay: 3000
        });

        // 显示toast
        bsToast.show();

        // 监听隐藏事件，移除元素
        toast.addEventListener('hidden.bs.toast', function() {
            toast.remove();
        });
    }

    // ===== 表单提交处理 =====
    // 使用jQuery的ready事件确保DOM加载完成
    $(document).ready(function() {
        console.log('DOM已加载，开始初始化功能...');

        const form = document.getElementById('landmark-form');

        // 表单提交处理
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            // 创建FormData对象
            const formData = new FormData(this);

            // 确保媒体列表数据正确提交
            try {
                const mediaInput = document.getElementById('media');
                if (mediaInput) {
                    const mediaValue = mediaInput.value;
                    console.log('媒体列表值:', mediaValue);
                    
                    // 如果媒体值不为空，确保它被正确添加到表单数据中
                    if (mediaValue && mediaValue.trim() !== '') {
                        // 更新或添加媒体字段
                        formData.set('media', mediaValue);
                        console.log('已添加媒体列表到表单数据:', mediaValue);
                    }
                }
            } catch (error) {
                console.error('处理媒体列表数据时出错:', error);
            }

            // 调试输出
            console.log('表单数据:');
            for (let pair of formData.entries()) {
                console.log(pair[0] + ': ' + pair[1]);
            }

            // 发送表单数据
            fetch(this.action, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                }
            })
            .catch(error => {
                console.error('表单提交失败:', error);
                showToast('表单提交失败', 'danger');
            });
        });

        // 延迟初始化文件上传功能，确保DOM完全加载
        setTimeout(() => {
            console.log('初始化文件上传模块...');
            initFileUploadModule();
        }, 500);

        // 初始化地图预览功能
        setTimeout(() => {
            console.log('初始化地图预览模块...');
            initMapPreview();
        }, 500);
    });

    // ===== 文件上传模块 =====

    // 文件上传功能初始化
    function initFileUploadModule() {
        console.log('正在初始化文件上传模块...');

        // 检查jQuery是否已加载
        if (typeof $ === 'undefined') {
            console.error('jQuery未加载，延迟初始化');
            setTimeout(initFileUploadModule, 1000);
            return;
        }

        // 获取DOM元素
        const uploadArea = document.querySelector('#media-upload-area');
        const fileInput = document.querySelector('#media-upload');
        const previewContainer = document.querySelector('#media-preview');
        const hiddenMediaInput = document.querySelector('#media');

        // 验证必要元素是否存在
        if (!uploadArea || !fileInput || !previewContainer || !hiddenMediaInput) {
            console.error('文件上传模块初始化失败 - 缺少必要元素:', {
                uploadArea: !!uploadArea,
                fileInput: !!fileInput,
                previewContainer: !!previewContainer,
                hiddenMediaInput: !!hiddenMediaInput
            });

            // 延迟重试
            setTimeout(initFileUploadModule, 1000);
            return;
        }

        console.log('文件上传模块元素验证通过');
        console.log('开始绑定文件上传事件...');

        // 设置上传区域样式
        uploadArea.style.cursor = 'pointer';
        uploadArea.style.userSelect = 'none';

        // ===== 点击上传功能 =====
        uploadArea.addEventListener('click', function(e) {
            // 确保点击的不是预览项或删除按钮
            if (!e.target.closest('.preview-item') && !e.target.closest('.preview-remove')) {
                console.log('触发文件选择对话框');
                e.preventDefault();
                e.stopPropagation();

                // 触发文件选择
                try {
                    // 创建新的事件触发文件选择
                    const event = new MouseEvent('click', {
                        view: window,
                        bubbles: true,
                        cancelable: true
                    });
                    fileInput.dispatchEvent(event);
                } catch (err) {
                    console.error('无法触发文件选择:', err);
                    showToast('无法打开文件选择对话框', 'danger');
                }
            }
        });

        // ===== 拖放上传功能 =====

        // 阻止浏览器默认拖放行为
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        // 拖放高亮效果
        function highlight() {
            uploadArea.classList.add('dragover');
            console.log('拖拽进入上传区域');
        }

        function unhighlight() {
            uploadArea.classList.remove('dragover');
            console.log('拖拽离开上传区域');
        }

        // 处理文件拖放
        function handleDrop(e) {
            console.log('文件被拖放到上传区域');
            preventDefaults(e); // 确保阻止默认行为

            let files;
            try {
                const dt = e.dataTransfer;
                files = dt.files;
            } catch (err) {
                console.error('获取拖放文件失败:', err);
                showToast('无法获取拖放的文件', 'danger');
                return;
            }

            if (files && files.length) {
                console.log(`检测到 ${files.length} 个文件`);
                // 转换为数组以确保兼容性
                const filesArray = Array.from(files);
                processFiles(filesArray);
            } else {
                console.log('拖放未包含文件');
                showToast('请拖放有效的图片文件', 'warning');
            }
        }

        // 绑定拖放事件
        try {
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                uploadArea.addEventListener(eventName, preventDefaults, false);
                console.log(`已绑定 ${eventName} 事件到上传区域`);
            });

            ['dragenter', 'dragover'].forEach(eventName => {
                uploadArea.addEventListener(eventName, highlight, false);
                console.log(`已绑定 ${eventName} 高亮事件到上传区域`);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                uploadArea.addEventListener(eventName, unhighlight, false);
                console.log(`已绑定 ${eventName} 取消高亮事件到上传区域`);
            });

            uploadArea.addEventListener('drop', handleDrop, false);
            console.log('已绑定 drop 事件到上传区域');

            // 阻止整个页面的默认拖放行为
            document.addEventListener('dragover', preventDefaults, false);
            document.addEventListener('drop', preventDefaults, false);
            console.log('已绑定页面级拖放事件');

            console.log('文件上传模块初始化完成');
        } catch (error) {
            console.error('绑定文件上传事件时出错:', error);
        }

        // ===== 文件选择处理 =====
        fileInput.addEventListener('change', function() {
            console.log('文件选择发生变化');
            try {
                if (this.files && this.files.length) {
                    console.log(`选择了 ${this.files.length} 个文件`);
                    // 转换为数组以确保兼容性
                    const filesArray = Array.from(this.files);
                    processFiles(filesArray);
                    // 清空input值，允许重复选择相同文件
                    this.value = '';
                } else {
                    console.log('未选择文件');
                }
            } catch (error) {
                console.error('处理文件选择事件时出错:', error);
                showToast('处理文件选择时出错', 'danger');
            }
        });

        // ===== 文件处理函数 =====
        function processFiles(files) {
            // 确保files是类数组对象并转换
            let filesArray;
            try {
                if (!files) {
                    console.error('未提供文件对象');
                    showToast('未找到文件', 'warning');
                    return;
                }
                
                // 确保files是可迭代的
                if (typeof files[Symbol.iterator] !== 'function') {
                    console.error('提供的文件对象不可迭代');
                    showToast('文件格式错误', 'warning');
                    return;
                }
                
                filesArray = Array.from(files);
                console.log('开始处理文件:', filesArray.map(f => ({ 
                    name: f.name || '未知文件名', 
                    size: f.size || 0, 
                    type: f.type || '未知类型' 
                })));
            } catch (error) {
                console.error('处理文件对象时出错:', error);
                showToast('处理文件时出错', 'danger');
                return;
            }

            // 验证文件
            const validFiles = [];
            const invalidFiles = [];

            try {
                filesArray.forEach(file => {
                    // 确保file是有效的文件对象
                    if (!file || typeof file !== 'object') {
                        invalidFiles.push({ file: { name: '无效对象' }, reason: '无效的文件对象' });
                        return;
                    }
                    
                    // 安全获取文件属性
                    const fileName = file.name || '未知文件';
                    const fileType = file.type || '';
                    const fileSize = file.size || 0;

                    // 检查文件类型
                    if (!fileType.match('image.*')) {
                        invalidFiles.push({ file: { name: fileName }, reason: '不是图片文件' });
                        return;
                    }

                    // 检查文件大小 (5MB限制)
                    if (fileSize > 5 * 1024 * 1024) {
                        invalidFiles.push({ file: { name: fileName }, reason: '文件超过5MB限制' });
                        return;
                    }

                    // 文件有效
                    validFiles.push(file);
                });
            } catch (error) {
                console.error('验证文件时出错:', error);
                showToast('验证文件时出错', 'danger');
                return;
            }

            // 显示无效文件信息
            if (invalidFiles.length) {
                const message = invalidFiles.map(item => 
                    `${item.file.name} (${item.reason})`
                ).join('<br>');
                showToast(`以下文件无法上传:<br>${message}`, 'warning');
            }

            // 如果没有有效文件，直接返回
            if (!validFiles.length) {
                showToast('没有可上传的文件', 'warning');
                return;
            }

            // 显示上传提示
            showToast(`正在上传 ${validFiles.length} 个文件...`, 'info');

            // 上传有效文件
            uploadFiles(validFiles);
        }

        // ===== 文件上传函数 =====
        function uploadFiles(files) {
            // 获取认证令牌
            const token = getAuthToken();
            if (!token) {
                showToast('请先登录后再上传文件', 'warning');
                return;
            }

            // 创建上传任务数组
            const uploadTasks = files.map(file => {
                return uploadSingleFile(file, token);
            });

            // 等待所有上传完成
            Promise.allSettled(uploadTasks).then(results => {
                // 统计上传结果
                const successful = results.filter(r => r.status === 'fulfilled').length;
                const failed = results.length - successful;

                // 显示结果通知
                if (successful) {
                    showToast(`成功上传 ${successful} 个文件`, 'success');
                }

                if (failed) {
                    showToast(`${failed} 个文件上传失败`, 'warning');
                }
            });
        }

        // ===== 单文件上传函数 =====
        function uploadSingleFile(file, token) {
            return new Promise((resolve, reject) => {
                // 创建表单数据
                const formData = new FormData();
                formData.append('file', file);

                // 发送上传请求
                fetch('/api/upload', {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => {
                            throw new Error(err.message || '上传失败');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('文件上传成功:', data);

                    // 添加预览
                    addFilePreview(data.path);

                    // 更新媒体列表
                    updateMediaList(data.path, 'add');

                    // 解决Promise
                    resolve(data);
                })
                .catch(error => {
                    console.error('文件上传失败:', error);
                    showToast(`上传 ${file.name} 失败: ${error.message}`, 'danger');
                    reject(error);
                });
            });
        }

        // ===== 添加文件预览 =====
        function addFilePreview(filePath) {
            // 创建预览元素
            const previewItem = document.createElement('div');
            previewItem.className = 'preview-item';
            previewItem.setAttribute('data-path', filePath);

            // 创建图片
            const img = document.createElement('img');
            img.src = '/' + filePath;
            img.alt = '媒体文件';

            // 创建删除按钮
            const removeBtn = document.createElement('div');
            removeBtn.className = 'preview-remove';
            removeBtn.innerHTML = '<i class="bi bi-x"></i>';

            // 删除按钮点击事件
            removeBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();

                // 从媒体列表中移除
                updateMediaList(filePath, 'remove');

                // 添加淡出效果
                previewItem.style.opacity = '0';
                previewItem.style.transition = 'opacity 0.3s';

                // 移除元素
                setTimeout(() => {
                    // 确保元素仍然存在
                    if (previewItem && previewItem.parentNode) {
                        previewItem.remove();
                    }
                }, 300);

                showToast('文件已移除', 'warning');
            });

            // 组装预览项
            previewItem.appendChild(img);
            previewItem.appendChild(removeBtn);

            // 添加到预览容器
            previewContainer.appendChild(previewItem);
        }

        // ===== 更新媒体列表 =====
        function updateMediaList(filePath, action) {
            try {
                // 获取当前媒体列表
                let mediaList = [];
                const currentValue = hiddenMediaInput.value;
                console.log('当前媒体列表值:', currentValue);

                if (currentValue && currentValue.trim() !== '') {
                    try {
                        const parsedValue = JSON.parse(currentValue);
                        console.log('解析后的媒体列表:', parsedValue);
                        // 确保mediaList是数组
                        if (Array.isArray(parsedValue)) {
                            mediaList = parsedValue;
                        } else if (typeof parsedValue === 'object') {
                            // 如果解析结果是对象，尝试提取路径
                            mediaList = Object.values(parsedValue).map(item => {
                                // 如果item是对象，尝试获取path属性
                                if (typeof item === 'object' && item !== null) {
                                    return item.path || item.id || item.toString();
                                }
                                return item;
                            });
                        }
                    } catch (parseError) {
                        console.error('解析媒体列表JSON失败:', parseError);
                        mediaList = [];
                    }
                }

                // 根据操作类型更新列表
                if (action === 'add') {
                    // 确保filePath是字符串
                    const pathStr = String(filePath);
                    console.log('添加文件路径:', pathStr);
                    if (!mediaList.some(item => String(item) === pathStr)) {
                        mediaList.push(pathStr);
                        console.log('文件路径已添加到列表');
                    } else {
                        console.log('文件路径已存在于列表中');
                    }
                } else if (action === 'remove') {
                    // 确保filePath是字符串
                    const pathStr = String(filePath);
                    console.log('移除文件路径:', pathStr);
                    const originalLength = mediaList.length;
                    mediaList = mediaList.filter(item => String(item) !== pathStr);
                    console.log(`过滤后列表长度: ${mediaList.length}, 原长度: ${originalLength}`);
                }

                // 更新隐藏输入框的值
                const updatedValue = JSON.stringify(mediaList);
                hiddenMediaInput.value = updatedValue;
                
                // 触发change事件，确保其他组件能够感知到变化
                const event = new Event('change', { bubbles: true });
                hiddenMediaInput.dispatchEvent(event);

                console.log('媒体列表已更新:', mediaList);
                console.log('隐藏输入框的新值:', updatedValue);
            } catch (error) {
                console.error('更新媒体列表失败:', error);
                showToast('更新媒体列表失败', 'danger');
            }
        }

        // ===== 获取认证令牌 =====
        function getAuthToken() {
            // 尝试从localStorage获取
            let token = localStorage.getItem('access_token');

            // 如果localStorage中没有，尝试从cookie获取
            if (!token) {
                const cookies = document.cookie.split(';');
                for (const cookie of cookies) {
                    const trimmedCookie = cookie.trim();
                    if (trimmedCookie.startsWith('access_token=')) {
                        token = trimmedCookie.substring('access_token='.length);
                        // 移除可能的引号
                        if (token.startsWith('"') && token.endsWith('"')) {
                            token = token.slice(1, -1);
                        }
                        break;
                    }
                }
            }

            return token;
        }

        // ===== 初始化已有预览项的删除功能 =====
        function initExistingPreviews() {
            // 移除所有现有的事件监听器，防止重复绑定
            const existingPreviews = previewContainer.querySelectorAll('.preview-item');
            existingPreviews.forEach(previewItem => {
                const removeBtn = previewItem.querySelector('.preview-remove');
                if (removeBtn) {
                    // 克隆按钮并替换，以移除所有事件监听器
                    const newRemoveBtn = removeBtn.cloneNode(true);
                    removeBtn.parentNode.replaceChild(newRemoveBtn, removeBtn);
                    
                    // 添加新的事件监听器
                    newRemoveBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        // 获取文件路径
                        const path = previewItem.getAttribute('data-path');

                        // 从媒体列表中移除
                        let mediaList = [];
                        try {
                            // 尝试解析现有的媒体列表
                            const mediaValue = document.getElementById('media').value;
                            if (mediaValue && mediaValue.trim() !== '') {
                                const parsedValue = JSON.parse(mediaValue);
                                // 确保mediaList是数组
                                if (Array.isArray(parsedValue)) {
                                    mediaList = parsedValue;
                                } else if (typeof parsedValue === 'object') {
                                    // 如果解析结果是对象，尝试提取路径
                                    mediaList = Object.values(parsedValue).map(item => {
                                        // 如果item是对象，尝试获取path属性
                                        if (typeof item === 'object' && item !== null) {
                                            return item.path || item.id || item.toString();
                                        }
                                        return item;
                                    });
                                }
                            }
                        } catch (e) {
                            console.error('解析媒体列表失败:', e);
                            mediaList = [];
                        }

                        // 确保path是字符串
                        const pathStr = String(path);
                        // 从列表中移除指定路径
                        mediaList = mediaList.filter(item => String(item) !== pathStr);
                        console.log('从列表中移除路径:', pathStr);

                        // 更新隐藏的input值
                        const updatedMediaValue = JSON.stringify(mediaList);
                        document.getElementById('media').value = updatedMediaValue;

                        // 调试日志
                        console.log('删除媒体后的列表:', mediaList);
                        console.log('删除媒体后的input值:', updatedMediaValue);

                        // 移除预览
                        previewItem.style.opacity = '0';
                        previewItem.style.transition = 'opacity 0.3s';
                        setTimeout(function() {
                            previewItem.remove();
                        }, 300);

                        showToast('媒体文件已移除', 'warning');
                    });
                }
            });
        }

        // 初始化已有预览项
        initExistingPreviews();

        console.log('文件上传模块初始化完成');
    }

    // ===== 地图预览模块 =====

    // 初始化地图预览功能
    function initMapPreview() {
        const lat = document.getElementById('lat').value;
        const lng = document.getElementById('lng').value;

        // 如果有坐标值，则自动显示地图
        if (lat && lng) {
            showMapPreview(lat, lng);
        }
    }

    // 显示地图预览
    function showMapPreview(lat, lng) {
        // 显示地图卡片
        document.getElementById('map-card').style.display = 'block';

        // 创建地图容器
        const mapContainer = document.getElementById('map-container');

        // 如果地图已经存在，不再重复创建
        if (document.getElementById('preview-map')) {
            updateMapPosition(lat, lng);
            return;
        }

        // 检查高德地图API是否已加载
        if (typeof AMap === 'undefined') {
            // 动态加载高德地图API
            const amapJS = document.createElement('script');
            amapJS.type = 'text/javascript';
            amapJS.src = 'https://webapi.amap.com/maps?v=2.0&key=8fe19a4590afc41b988c6d4f18710cb5&plugin=AMap.ToolBar';
            amapJS.onload = function() {
                // 高德地图API加载完成后创建地图
                createMapAfterAmapLoaded(lat, lng);
            };
            document.head.appendChild(amapJS);

            // 添加高德地图样式
            const amapCSS = document.createElement('link');
            amapCSS.rel = 'stylesheet';
            amapCSS.href = 'https://cache.amap.com/lbs/static/main1119.css';
            document.head.appendChild(amapCSS);
        } else {
            // 高德地图API已加载，直接创建地图
            createMapAfterAmapLoaded(lat, lng);
        }
    }

    // 高德地图API加载完成后创建地图
    function createMapAfterAmapLoaded(lat, lng) {
        // 创建地图容器
        const mapContainer = document.getElementById('map-container');

        // 清空容器并添加地图元素
        mapContainer.innerHTML = '<div id="preview-map" style="width: 100%; height: 100%;"></div>';

        // 确保AMap已定义
        if (typeof AMap === 'undefined') {
            console.error('高德地图API未正确加载');
            showToast('地图库加载失败，请刷新页面重试', 'danger');
            return;
        }

        // 初始化地图
        try {
            // 创建地图实例
            window.landmarkMap = new AMap.Map('preview-map', {
                viewMode: '2D',  // 默认为2D模式
                zoom: 16,         // 初始缩放级别
                center: [lng, lat] // 初始中心点位置 [经度, 纬度]
            });

            // 添加工具条控件
            window.landmarkMap.addControl(new AMap.ToolBar({
                position: 'RB'
            }));

            // 添加标记
            const nameValue = document.getElementById('name').value || '地标位置';
            window.landmarkMarker = new AMap.Marker({
                position: [lng, lat], // 经度, 纬度
                title: nameValue,
                map: window.landmarkMap
            });

            // 添加信息窗体
            const infoWindow = new AMap.InfoWindow({
                content: '<div class="info-window">' +
                         '<h4>' + nameValue + '</h4>' +
                         '<p>纬度: ' + lat + '</p>' +
                         '<p>经度: ' + lng + '</p>' +
                         '</div>',
                offset: new AMap.Pixel(0, -30)
            });

            // 在标记上打开信息窗体
            infoWindow.open(window.landmarkMap, [lng, lat]);

            // 添加点击事件，允许用户通过点击地图更新坐标
            window.landmarkMap.on('click', function(e) {
                const newLng = e.lnglat.getLng().toFixed(6);
                const newLat = e.lnglat.getLat().toFixed(6);

                // 更新表单中的坐标
                document.getElementById('lat').value = newLat;
                document.getElementById('lng').value = newLng;

                // 更新地图上的标记
                updateMapPosition(newLat, newLng);

                showToast('已更新坐标', 'success');
            });
        } catch (error) {
            console.error('初始化地图失败:', error);
            showToast('地图初始化失败', 'danger');
        }
    }

    // 更新地图上的标记位置
    function updateMapPosition(lat, lng) {
        // 检查高德地图API是否已加载
        if (typeof AMap === 'undefined') {
            console.error('高德地图API未加载，无法更新地图位置');
            return;
        }

        if (window.landmarkMap && window.landmarkMarker) {
            try {
                // 更新地图视图
                window.landmarkMap.setCenter([lng, lat]);

                // 更新标记位置
                window.landmarkMarker.setPosition([lng, lat]);

                // 更新信息窗体
                const nameValue = document.getElementById('name').value || '地标位置';
                const infoWindow = new AMap.InfoWindow({
                    content: '<div class="info-window">' +
                             '<h4>' + nameValue + '</h4>' +
                             '<p>纬度: ' + lat + '</p>' +
                             '<p>经度: ' + lng + '</p>' +
                             '</div>',
                    offset: new AMap.Pixel(0, -30)
                });

                // 在标记上打开信息窗体
                infoWindow.open(window.landmarkMap, [lng, lat]);
            } catch (error) {
                console.error('更新地图位置失败:', error);
            }
        } else {
            console.warn('地图或标记未初始化，尝试重新创建地图');
            // 尝试重新创建地图
            showMapPreview(lat, lng);
        }
    }

    // 预览位置按钮点击事件
    document.getElementById('preview-location').addEventListener('click', function() {
        const lat = document.getElementById('lat').value;
        const lng = document.getElementById('lng').value;

        if (!lat || !lng) {
            showToast('请先输入纬度和经度', 'warning');
            return;
        }

        showMapPreview(lat, lng);

        // 滚动到地图位置
        const mapCard = document.getElementById('map-card');
        const topPosition = mapCard.getBoundingClientRect().top + window.pageYOffset - 100;

        window.scrollTo({
            top: topPosition,
            behavior: 'smooth'
        });
    });

    // 监听坐标输入变化，实时更新地图（如果地图已显示）
    document.getElementById('lat').addEventListener('input', function() {
        const lat = this.value;
        const lng = document.getElementById('lng').value;

        if (lat && lng && document.getElementById('map-card').style.display !== 'none') {
            updateMapPosition(lat, lng);
        }
    });

    document.getElementById('lng').addEventListener('input', function() {
        const lat = document.getElementById('lat').value;
        const lng = this.value;

        if (lat && lng && document.getElementById('map-card').style.display !== 'none') {
            updateMapPosition(lat, lng);
        }
    });
</script>
{% endblock %}